<script setup lang="ts">
import { computed, onMounted } from 'vue';

const props: any = defineProps<{
    ujt: any;
    showtype?: number;
}>();
const { $fn, $db, $global } = props.ujt;
const { fetchContent, setPage, delUser } = $fn.useUser(props);

$db.channeluser.fetch = fetchContent;
$db.channeluser.setpage = setPage;

onMounted(() => {
    fetchContent(0);
});

$db.channeluser.cmPageSize = computed(() => {
    return Number($global.location.query.ps || $db.channeluser.config?.ps) || 5;
});
function deleteItem(item: any) {
    $db.channeluser.cur.us = '';
    $db.channeluser.cur.pw = '';
    $db.channeluser.cur.lv = 0;
    $global.pop['popdefaultconfirm'].stat = 1;
    $global.pop['popdefaultconfirm'].full = 1;
    $global.pop['popdefaultconfirm'].con =
        $global.lang.channeluser.ui.del + ' ' + item.us;
    $global.pop['popdefaultconfirm'].fn = () => delUser(item.us);
}
function editItem(item: any) {
    $fn.setquery({ us: item.us }, 1);
    $db.channeluser.cur.us = item.us;
    $db.channeluser.cur.pw = item.pw;
    $db.channeluser.cur.lv = item.lv;
    $global.pop['popedituser'].stat = 1;
    $global.pop['popedituser'].tit =
        $global.lang.channeluser.ui.edit + ' ' + item.us;
}
const cmUserList = computed(() => {
    return ($db?.channeluser?.list || []).filter((el: any) => {
        return +el?.lv <= +$global.user?.info?.lv;
    });
});
</script>

<template>
    <PopBox :ujt="ujt" id="popedituser" :full="1">
        <UserEditManage :ujt="ujt" v-if="$global.pop['popedituser'].stat">
            <template #btn>
                <div @pointerdown="$global.pop['popedituser'].stat = 0">
                    {{ $fn.lg('asai.close') }}
                </div>
            </template>
        </UserEditManage>
    </PopBox>
    <div class="as-user-area-manage">
        <div class="as-user">
            <slot name="tit"></slot>
            <slot name="btn"></slot>
            <ChannelListSearch
                v-if="!showtype"
                :ujt="ujt"
                :opt="{ channel: 'channeluser', model: 'asai', ty: 1 }"
            >
            </ChannelListSearch>

            <div class="as-user-list as-list-nth">
                <div class="tit">
                    <div class="li">{{ $global.lang.channeluser.data.us }}</div>
                    <div class="lis">
                        {{ $global.lang.channeluser.data.lv }}
                    </div>
                    <div class="btns">
                        {{ $global.lang.asai.opt }}
                    </div>
                </div>
                <div v-for="item in cmUserList">
                    <div class="li">{{ item.us }}</div>
                    <div class="lis">
                        {{ $global.lang.channeluser.lv[item.lv] }}
                    </div>
                    <div class="btns" v-if="+item.lv < $global.user?.info?.lv">
                        <div @pointerdown="editItem(item)">
                            {{ $fn.lg('channeluser.ui.edit') }}
                        </div>
                        <div @pointerdown="deleteItem(item)">
                            {{ $fn.lg('channeluser.ui.del') }}
                        </div>
                    </div>
                    <div class="btns" v-else>-</div>
                </div>
            </div>
            <div
                v-if="$db['channeluser']?.cmPageList?.length > 1"
                class="as-channel-page"
            >
                <ChannelListPage
                    :ujt="ujt"
                    :opt="{ channel: 'channeluser', model: 'asai', ty: 1 }"
                ></ChannelListPage>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss"></style>
